<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<style type="text/css">
  td{
    white-space:nowrap;
    overflow:hidden;
    word-break:keep-all;
   }
</style>
 <div id="legend" class="">
   <legend class="">贡献信息</legend>
</div>

<div class="row" style="background:#fff;">
<div class="col-sm-9">
      
  <div style="height:600px;overflow:auto">
    <table id="table"></table>
  </div>
</div>


<div class="col-sm-3">

<div>
         <div class="control-group">
              <!-- Search input-->
              <div class="controls thumbnail">
                  <img src="" id='img'>
              </div>

           </div>


    <div class="control-group">

          <!-- Select Basic -->
          <div class="controls">
          <label class="control-label">类别</label>
            <select class="form-control" id='gx_fl'>
              <option value='10'>人物</option>
              <option value='20'>建筑</option>
              <option value='30'>艺术</option>
            </select>
          </div>

        </div>

    <div class="control-group">

          <!-- Search input-->
          <div class="controls">
            <label class="control-label">名称</label>
            <input type="text" placeholder="人名，建筑名，艺术品名" id='gx_name' maxlength="20" class="form-control input-xlarge search-query">
          </div>

        </div>

    
    <div class="control-group">

          <!-- Textarea -->
          <label class="control-label">简介</label>
          <div class="controls">
            <div class="textarea">
                  <textarea type="" class="form-control" id = 'gx_intro'> </textarea>
            </div>
          </div>
        </div><div class="control-group">

          <!-- Textarea -->
          <label class="control-label">详细信息</label>
          <div class="controls">
            <div class="textarea">
                  <textarea type="" class="form-control"  id = 'gx_xxxx' style="height: 150px;resize: none;"> </textarea>
            </div>
          </div>
        </div>

    <div class="control-group">

          <!-- Text input-->
          <div class="controls">
            <label class="control-label">国家</label>
            <input type="text" placeholder="国家" id = 'gx_gj' maxlength="11" class="form-control">
            <p class="help-block"></p>
          </div>
        </div>

   
    <div class="control-group">

          <!-- Text input-->
          <label class="control-label" for="input01">日期起</label>
          <div class="controls">
            <input type="text" placeholder="填数字，公元前‘-’号表示"  id = 'gx_rqq' class="form-control">
          </div>
        </div>

    <div class="control-group">

          <!-- Text input-->
          <label class="control-label" for="input01">日起止</label>
          <div class="controls">
            <input type="text" placeholder="填数字，公元前‘-’号表示" id = 'gx_rqz' class="form-control">
          </div>
        </div>


    <div class="control-group">
          <label class="control-label"></label>

          <!-- Button -->
          <div class="controls">
            <button class="btn btn-success form-control" id = 'updateInfo'>提交</button>
          </div>
        </div>


</div>

</div>

 <script src="static/js/bootstrap-table.min.js"></script>
 <script src="static/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
                    // 初始化表格
                    let xxid='';
                    initTable();
                });

                function initTable() {
                        var t = $("#table").bootstrapTable({
                        url: '/get_data',
                        method: 'get',
                        dataType: "json",
                        striped: true,//设置为 true 会有隔行变色效果
                        undefinedText: "空",//当数据为 undefined 时显示的字符
                        pagination: true, //分页
                //      paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
                //      showToggle: "true",//是否显示 切换试图（table/card）按钮
                //      showColumns: "true",//是否显示 内容列下拉框
                        pageNumber: 1,//如果设置了分页，首页页码
                //      showPaginationSwitch:true,//是否显示 数据条数选择框
                        pageSize: 10,//如果设置了分页，页面数据条数
                        pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
                        paginationPreText: '<<',//指定分页条中上一页按钮的图标或文字,这里是<
                        paginationNextText: '>>',//指定分页条中下一页按钮的图标或文字,这里是>
                //      singleSelect: false,//设置True 将禁止多选
                        search: true, //显示搜索框
                        //data_local: "zh-US",//表格汉化
                        sidePagination: "client", //服务端处理分页
                        queryParams: queryParams,//将返回的值赋值给table插件的属性
                        responseHandler:function(res){
                            return{
                                "total":res.total,
                                "rows": res.rows,
                            }
                        },
                        idField: "uuid",//指定主键列
                        columns: [{
                                    field:'need_name',
                                    title:'名称'
                                },{
                                    field:'country',
                                    title:'国家'
                                },{
                                    field:'intro',
                                    title:'简介(双击行编辑)'
                                },{
                                    field:'lrrq',
                                    title:'提交时间'

                                },{
                                    field: 'spjg',
                                    title:'审批结果'

                                },{
                                    field:'spyj',
                                    title:'审批意见'

                                },{
                                    field:'spsj',
                                    title:'审批时间'

                                },
                                {
                                    title: '操作',          
                                    align: 'center',
                                    formatter: function (value, records, index) {

                                        let html= ''
                                        if(records.spjg != '审批通过'){
                                          html = '<a href=javascript:deletebyid(' + '"'+records.uuid+'#'+index+ '"' + ')  >删除</a> '
                                        }
                                        
                                        return html
                                    }
                                }
                                ],
                                //表格行双击事件
                               onDblClickRow:function(row, $element, field){
                                     xxid = row.uuid
                                     img_url ='static/tmp_img/'+xxid+'.jpg'
                                     $('#gx_name').val(row.need_name)
                                     $('#gx_fl').val(row.fl)
                                     $('#gx_gj').val(row.country)
                                     $('#gx_intro').val(row.intro)
                                     $('#gx_xxxx').val(row.xxxx)
                                     $('#gx_rqq').val(row.rqq)
                                     $('#gx_rqz').val(row.rqz)
                                     $('#img').attr('src',img_url);
                                     $('#updateInfo').show()
                                     if(row.spjg == '审批通过'){
                                          $('#updateInfo').hide()
                                      }

                              }
                    });
                };

        //分页查询参数，是以键值对的形式设置的
        function queryParams(params) {
            return {
                user_xm: $('#user_xm').val(), // 请求时向服务端传递的参数
                pageNum: params.offset, // SQL语句偏移量
                pageSize: params.limit, // 每页显示数量
            }
        }

        // 搜索按钮触发事件
/*        $(function() {
            $("#btn_query").click(function() {
                $('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
            });
        });*/

        //点击删除按钮触发的事件
        function deletebyid(index){

             let uuid = index.split('#')[0]
             let tr_id = index.split('#')[1]
             r = confirm("确定要删除吗？")
             if (r == false){
                return
             }
                  $.ajax({
                      "url":"/zlxx_delete",
                      "async" : true,
                      "dataType":'json',
                      "data":{'uuid':uuid},
                      "type" : "post",
                      "success":function (data) {
                        
                          alert(data.mes)
                          $('#table').bootstrapTable(('refresh'));

                      },    
                      "error":function (res) {  
                          alert(res)
                      } 
                     });
        }

//修改提交
     $('#updateInfo').click(function(){

              gj   = $('#gx_gj').val()
              fl   = $('#gx_fl').val()
              name = $('#gx_name').val()
              rqq  = $('#gx_rqq').val()
              rqz  = $('#gx_rqz').val()
              intro= $('#gx_intro').val()
              xxxx = $('#gx_xxxx').val()

              if(rqq=='' || rqz=='' || name=='' || intro==''|| xxxx==''){
                alert('信息不能为空！')
                return 
              }

                let list = {
                  'bz'  :'update',
                  'gj'  : gj,
                  'fl'  : fl,
                  'name': name,
                  'rqq' : rqq,
                  'rqz' : rqz,
                  'intro': intro,
                  'xxxx': xxxx,
                  'uuid':xxid
                 }
           
                 $.ajax({
                  //请求方式
                      type : "POST",
                      //数据类型
                      dataType: 'json',
                      //请求地址
                      url : "/post_zlxx",
                      //数据，json字符串
                      data : list,
                      //请求成功
                      success : function(rs) {
                          alert(rs.mes)
                          $('#gx_name').val('');
                          $('#gx_gj').val('');
                          $('#gx_rqq').val('');
                          $('#gx_rqz').val('');
                          $('#gx_intro').val('');
                          $('#gx_xxxx').val('');
                          $('#table').bootstrapTable(('refresh'));
                      },
                      //请求失败，包含具体的错误信息
                      error : function(e){
                          alert(e)
                      }
                  });

          });


</script>
